<template>
  <!-- 页面标题区 -->
    <a-row  class="page-content-header">
      <span class="title">{{routeName}}</span>
    </a-row>
    <a-row class="password-form">
      <div class="div1">
        <a-form :model="form" name="password_change" @finish="updatePassword">
          <a-form-item class="form-item">原始密码</a-form-item>
          <a-form-item class="password" name="oldPassword">
              <a-input-password size="small" v-model:value="form.oldPassword"/>
          </a-form-item>
          <a-form-item class="form-item">新密码</a-form-item>
          <a-form-item class="password" name="newPassword1">
              <a-input-password size="small" v-model:value="form.newPassword1"/>
          </a-form-item>
          <a-form-item class="form-item">重复新密码</a-form-item>
          <a-form-item class="password" name="newPassword2">
              <a-input-password size="small" v-model:value="form.newPassword2"/>
          </a-form-item>
          <a-form-item class="form-item">微信绑定</a-form-item>
          <a-form-item class="bind" v-if="sign===0">
            <a-button type="link" size="small" @click="binding" style="color: red;font-size: 12px;">未绑定</a-button>
          </a-form-item>
          <a-form-item class="bind" v-else>
            <a-button type="link" size="small" @click="look_bind" style="color: rgb(0, 160, 0);font-size: 12px;">已绑定</a-button>
            <a-button type="link" size="small" @click="unbind" style="font-size: 12px;">解除绑定</a-button>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" size="small" style="font-size: 12px;" html-type="submit" >修改密码</a-button>
          </a-form-item>
        </a-form>
      </div>
      <div class="div2">
        <a-image-preview-group>
          <a-image :width="100" shape="square" :src="picture" />
        </a-image-preview-group>
        <a-row style="margin-top: 30px;">

          <a-upload :show-upload-list="false" action="https://www.mocky.io/v2/5cc8019d300000980a055e76">
            <a-button type="default" size="small" style="font-size: 12px;">
              更换头像
            </a-button>
          </a-upload>
          <a-button type="default" size="small" @click="change_avatar" style="font-size: 12px;">更换头像</a-button>
        </a-row>
      </div>
    </a-row>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { computed,onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { notification } from 'ant-design-vue';
const route = useRoute();
//标题
const routeName = computed(() => route.meta.title);

const sign=ref(0)
const form = reactive({
  oldPassword: '123',
  newPassword1: '1234',
  newPassword2: '1234'
});
const picture = ref("https://aliyuncdn.antdv.com/logo.png");


//生命周期
onMounted(() => {
  console.log("获取sign(判断是否绑定)")
})

  //修改密码
const updatePassword = values => {
  if (values.oldPassword === values.newPassword1) {
    notification.open({
      message: '修改失败',
      description: '新密码不能与原密码一致'
    })
  }
  else if (values.newPassword1 !== values.newPassword2) {
      notification.open({
        message: '修改失败',
        description: '新密码不一致'
      })
    }
  else {
    console.log(values)
    notification.open({
      message: '修改成功',
      description: '已成功修改密码，请重新登录!'
    });
  }

}
//微信绑定
const binding = () => {
  sign.value=1
}
//查看绑定
const look_bind = () => {
  console.log("已绑定")
}
//解除绑定
const unbind = () => {
  sign.value=0
}
//更换头像
const change_avatar = () => {
}
</script>


<style lang="less" scoped>
.page-content-header{
  padding: 2% 0% 0% 5%;
  margin:0;

  .title{
    display: block;
    float: left;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
  }
}
.password-form{
  height: 80vh;
  width: 100%;
  padding-left: 20px;

  .div1{
    margin: 3%;
    width: 26%;
    float: left;
    .form-item{
      font-size: 12px;
      margin-top: -10%;
    }
    .password{
    margin-top: -16%;
    }
    .bind{
      margin-left: -3%;
      margin-top: -16%;
    }
  }
  .div2{
    margin-left: 3%;
    margin-top: 5%;
    float: left;
  }

}

</style>
